<template>
  <div class="purchase_suceess">
    <!-- 头部 -->
    <CommonHeader :balance="gemsNum" />
    <div class="suceess_content">
      <img src="@/assets/images/ic_star_72@2x.png" class="diamond_72_img" />
      <div class="text">Purchase successful</div>
      <div class="text" v-if="amount">You have won {{ amount }} gems</div>
      <van-button type="primary" class="btn_top" @click="goViewMyCreation">View My Creation</van-button>
      <!-- <van-button type="default" class="btn_bottom" @click="goRecharge">Continue to recharge</van-button> -->
    </div>
    <div class="login-box" v-if="!authStore.isrealLogin">
      <p class="notice">Important Notice.</p>
      <div class="tips_wrap">
        <img src="@/assets/images/normal_pic@2x.png" alt="" />
        <p>Please login to retain membership.</p>
      </div>
      <div class="login_wrap">
        <van-button plain type="primary" class="sign_in" @click="goSignIn">Sign in</van-button>
        <van-button plain type="primary" class="login_btn" @click="goLogin">Login</van-button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/authStore";
import CommonHeader from "@/components/CommonHeader.vue";
import api from "@/api";
import { trackEvent } from '@/utils/firebase';
const amount = ref(localStorage?.getItem('amount'))
const router = useRouter();
const authStore = useAuthStore();
const goRecharge = () => {
  router.push("/myDiamonds");
};

const goViewMyCreation = async () => {
  const getGoPay = JSON.parse(sessionStorage.getItem("goPay"));
  if (getGoPay) {
    try {
      const res = await api.taskSubmit(getGoPay.params);
      router.push({
        path: "/removeCreating",
        query: {
          taskNo: res.data.taskNo,
          from: getGoPay.from,
        },
      });
    } catch (err) {
      console.log(err);
    }
  } else {
    // showToast("taskNo cannot be empty");
    router.push("./me");
  }
};

const gemsNum = ref("");
// 查询积分余额
const queryBalance = async () => {
  try {
    const res = await api.pointsBalance();
    gemsNum.value = String(res.data.balance);
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  queryBalance();
  trackEvent('支付成功', { type: 'GooglePay' });//埋点
});
</script>

<style lang="less" scoped>
.purchase_suceess {
  .suceess_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 120px;

    .diamond_72_img {
      width: 72px;
    }

    .text {
      margin-top: 15px;
    }

    .btn_top {
      margin-top: 20px;
    }

    .btn_bottom {
      margin-top: 20px;
    }
  }

  .notice {
    display: flex;
    justify-content: center;
    color: #6251ff;
  }

  .tips_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;


    img {
      width: 24px;
      margin-right: 9px;
    }

    p {
      font-size: 14px;
      color: #6251ff;
    }
  }

  .login-box {
    width: 280px;
    margin: auto;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-top: 20px;
    padding: 15px 0;
  }

  .login_wrap {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 8px;

    .van-button {
      border: 0;
      font-weight: 700;
      width: 88px;
      height: 40px;
      line-height: 40px;
      background: #6251ff;
      border-radius: 28px 28px 28px 28px;
      font-size: 12px;
      color: #ffffff;
    }

    .sign_in {
      margin-right: 16px;
    }
  }
}
</style>
